<template>
    <div class="owner">
        <div class="media owner-media relative clearfix">
            <div class="media-object pull-left"><img :src="ownerInfo.imgSrc" alt=""></div>
            <div class="media-body over-hidden">
                <div class="media-heading">{{ownerInfo.name}}&nbsp;</div>
                <!-- <div class="media-desc">粉丝 | 访问量{{visits}}&nbsp;</div> -->
                <div class="media-desc">访问量{{visits}}&nbsp;</div>
            </div>
            <button type="button" class="button btn-follow"
                @click="showFollowPanle"
            >关注</button>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        ownerInfo: {
            type: Object,
            default: {
                name: '',
                imgSrc: '',
                visits: 0,
                id: ''
            }
        }
    },
    data() {
        return {
        };
    },
    computed: {
        visits(){
            if(this.ownerInfo.visits >= 10000) return `${this.ownerInfo.visits/10000}w`;
            return this.ownerInfo.visits;
        }
    },
    methods: {
        showFollowPanle(){
            this.$emit('show-follow-panel');
        }
    },
    created() {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
.owner-media {
    padding: 20px 0;
    position: relative;
    background-color: #fff;
    .media-object {
        width: 80px;
        height: 80px;
        margin-right: 20px;
        img {
            float: left;
        }
    }
    .media-heading {
        font-size: 30px;
        line-height: 1.5;
        color: #333;
    }

    .media-desc {
        font-size: 24px;
        line-height: 2;
        color: #999;
    }

    > .btn-follow {
      display: inline-block;
      width: 130px;
      height: 56px;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate3d(0, -50%, 0);
      font-size: 26px;
      line-height: 56px;
      color: #fff;
      background: linear-gradient(#103ee7, #318bff);
      border-radius: 28px;
    }
}
</style>